import React, {Component} from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Checkbox,
  Radio,
  Modal,
  Icon,
  message,
  Switch,
  Card,
} from 'antd';
import myaxios, {get, put, post} from 'common/fetch';
import {CARTYPE_URL, MODEL_DETAIL_URL} from 'constant/url';
import AvatarUpload from './component/avatarUploader';

const RadioGroup = Radio.Group,
  FormItem = Form.Item;

export default class VehicleModel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carTypeId: null,
      released: false,
      modelDetail: {},
      carTypeList: [],
      modelImg: null,
    };
  }
  componentDidMount() {
    this.setState({
      modelDetail: this.props.modelDetail && this.props.modelDetail,
      carTypeId:
        this.props.modelDetail.typeId &&
        this.props.modelDetail.typeId.toString(),
      released: this.props.modelDetail.released == 1 ? true : false,
      modelImg: this.props.modelDetail && this.props.modelDetail.modelImg,
    });
    this.queryCarType({});
  }
  // 获取车辆分类
  queryCarType() {
    get(CARTYPE_URL).then(res => {
      this.setState({
        carTypeList: res,
      });
    });
  }
  onRadioChange = e => {
    const carTypeId = e.target.value;
    this.setState({
      carTypeId,
    });
  };
  onSwitchChange = value => {
    const released = value;
    this.setState({
      released,
    });
  };
  // 确认按钮
  handleOk() {
    const {modelDetail, carTypeId, released, modelImg} = this.state;
    post(`${MODEL_DETAIL_URL}/${modelDetail.modelId}`, {
      typeId: carTypeId,
      released: released ? 1 : 0,
      modelImg,
    }).then(res => {
      this.props.reloadModelDetail();
      this.props.hidePanel();
    });
  }
  modelImgChange = value => {
    this.setState({
      modelImg: value,
    });
    const {modelDetail} = this.state;
    return post(`${MODEL_DETAIL_URL}/${modelDetail.modelId}`, {
      modelImg: value,
    }).then(res => {
      this.props.reloadModelDetail();
    });
  };
  render() {
    const {
      modelDetail,
      carTypeList,
      carTypeId,
      released,
      modelImg,
    } = this.state;
    const carTypeListRadios = carTypeList.map((ele, index) => {
      return (
        <Radio style={{width: '100px'}} value={ele.id.toString()} key={index}>
          {ele.name}
        </Radio>
      );
    });
    return (
      <div>
        <h5 className="panel-custom-title">编辑车型</h5>
        <Card title="车型图" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <AvatarUpload
                onEdit={value => {
                  return this.modelImgChange(value);
                }}
                defaultImg={modelImg}
              />
            </div>
          </div>
        </Card>
        <Card title="品牌" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <div className="mb10">品牌名称：{modelDetail.brandName}</div>
            </div>
          </div>
        </Card>
        <Card title="车型" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper mb10">
            <div>
              <div className="mb10">车型名称：{modelDetail.modelName}</div>
            </div>
          </div>
          <div className="msg-assign-wrapper mt30">
            <div>
              <div className="mb10">请选择车型分类：</div>
              <div className="mt10">
                <RadioGroup onChange={this.onRadioChange} value={carTypeId}>
                  {carTypeListRadios}
                </RadioGroup>
              </div>
            </div>
          </div>
          <div className="msg-assign-wrapper mt30">
            <div>
              <div className="mb10">发布至线上：</div>
              <div className="mt10">
                <Switch onChange={this.onSwitchChange} checked={released} />
              </div>
            </div>
          </div>
        </Card>

        <Button
          type="primary"
          className="mt30 ml20"
          onClick={this.handleOk.bind(this)}>
          确定
        </Button>
      </div>
    );
  }
}
